<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Template的三种写法</title>
	</head>

	<body>
		<div id="app">
			<h2>Template的三种写法</h2>
			<h3>{{content}}</h3>
		<!--第2中template的写法-->
			<!--Template的标签模板 	可引用写好的静态html，但是template须有个id，并进行申明-->
			<!--<template id="Function2">
				<h3 style="color:red">我是template标签模板</h3>
			</template>-->
		</div>
		<!--第3中script方法写template  vue特定模板-->
		<script type="x-template" id="Function3">
			<h3 style="color:red">我是Script标签模板</h3>
		</script>
		<!--当需要引用的模板较多时，模板体积较大时，
		可以采用script中的src属性，进行外部调用，保持页面的简洁，一目了然-->
		<script src="../assets/js/vue.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					content: 'Vue.js !',
//					template: '#Function2' //第2中template的写法的引用声明
				},
		//第1中template写法   适合文字较少的模板应用,很小的组件
//				template:` //由于单引号、双引号运用频繁，引入波浪线的左撇号来声明模板内容
//					<h3 style="color:red">我是template选项模板</h3>
//					`

				template: '#Function3' //第3中template的写法的引用声明
			})
		</script>
	</body>

</html>